<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{position:relative;width: 320px;height: 480px;overflow: hidden;}
			.slide img{position:absolute;top:0;left:0;width: 320px;height: 100%;transition: 0.5s;}
		</style>
	</head>
	<body>
		<div class="slide" id="slide">
			<img src="./images/3.jpg"><!--0-->
			<img src="./images/2.jpg"><!--1-->
			<img src="./images/1.jpg"><!--2-->
		</div>
		<script type="text/javascript">
			var slide = document.getElementById('slide');
			var slideLength = slide.children.length; // 图片的总数
			var imgCounts = slide.children.length; // 图片的索引值 
			console.log(imgCounts);
			function s(){
				slide.children[--imgCounts].style.opacity = '1'; // 2
				for(var i = 0;i < slideLength;i++){
					if(i !== imgCounts){
						slide.children[i].style.opacity = '0';
					}
				}
			}
			setInterval(function(){
				if(imgCounts == 0){
					imgCounts = slideLength;
					s();
				}else{
					s();
				}
				
				console.log(imgCounts);
			},2000);
		</script>
	</body>
</html>